import React,{Component} from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
import util from "@/common/util"
import layer from '@/common/layer'

class Reg extends Component{
    constructor(props){
        super(props);
        this.state={
            startShow:true,
            videoLayerShow:true
        }
        this.video=null;
    }

    hideVideoLayer(){
        this.setState({
            videoLayerShow:false
        })
        window.location.href="./reg.html";
    }

    startVideo(){
        this.video.play();
        this.setState({
            startShow:false
        })
    }

    componentDidMount(){
        this.video=document.getElementById('video');

        var timer=setInterval(()=>{
            // tongji
            if (this.video.currentTime>0){
                console.log(this.video.currentTime)
                window._hmt.push(['_trackEvent', "video","play", "kuaishan", "1"]);
                this.setState({
                    startShow:false
                })
                clearInterval(timer)
            }
        },200)

    }

    render(){
        return (
        <div>
            <div id="start" style={{display:(this.state.startShow)?'flex':'none'}} onClick={this.startVideo.bind(this)}>
                <span>开始播放</span>
            </div>
            <div id="videoLayer" style={{display:(this.state.videoLayerShow)?'flex':'none'}}>
                <video id="video" onEnded={this.hideVideoLayer.bind(this)} src="http://h5act.zmngame.com/Content/SuNing20161111SP/images/suning.mp4" autoPlay="true" preload="auto"></video>
            </div>
        </div>
        )
    }
}


ReactDom.render(< Reg/>,document.getElementById('app'))